<template>
    <div class="dropdown_pay_type_container">
        <div class="pay_type_label">{{ label || '' }}</div>
        <el-dropdown class="pay_type_dropdown" trigger="click" :disabled="disabled"
                     @command="handleCommand" v-if="!detail">
            <span class="el-dropdown-link">
                批量设置<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
                <template v-for="(item, index) in commandList">
                    <el-dropdown-item :key="index" :command="item.value">{{ item.label }}</el-dropdown-item>
                </template>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    name: "DropdownPayType",
    props: {
        label: String,
        type: {
            type: String,
            default: 'recv',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        detail: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            commandList: [
                {
                    value: 'cash',
                    label: '现金',
                },
                {
                    value: 'bank_card',
                    label: '银行卡',
                },
                {
                    value: 'mobile',
                    label: 'POST机',
                },
                {
                    value: 'alipay',
                    label: '支付宝',
                },
                {
                    value: 'wechat',
                    label: '微信',
                },
                {
                    value: 'bank_auto_pay',
                    label: '银行自动转账',
                },
            ],
        };
    },
    methods: {
        handleCommand(command) {
            this.$emit('command', command);
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.dropdown_pay_type_container {
    display: inline-block;
    vertical-align: middle;

    .pay_type_label {
        display: inline-block;
        vertical-align: middle;
    }

    .pay_type_dropdown {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
        font-size: 12px;
        line-height: 1;
        margin-top: -12px;
        color: #409eff;
    }
}
</style>
